<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="xuemeng">
        <title>手机音乐播放器</title>
        <!--样式css 修饰 衣服 化妆品-->
        <style>
            /*通配符：选择到所有的标签元素*/
            *{
                margin: 0;
                padding: 0;

            }
            body{
                background-color: black;
            }
            /*#music选择器*/
            #music{
                /*父级相对定位*/
                position: relative;
                height: 600px;
                width: 322px;
                /*background: white;*/
                margin: 50px auto;
            }
            .m_top{
                width: 322px;
                height: 42px;
                background:url(image/phone_top.png);
            }
            .m_info{
                 width: 322px;
                height: 20px;
                background:url(image/top.jpg);
            }
            .title{
                width: 320px;
                height: 40px;
                color: white;
                text-align: center;
                border: 1px solid white;
                border-top: none;
                border-bottom: none;
            }
            .gc{
                height: 485px;
                border: 1px solid white;
                border-top: none;
                border-bottom: none;
                background: url(image/2.jpg) no-repeat;
                /*背景尺寸：覆盖（等比例放大直到小的尺寸和盒子一样:不会变形）*/
                background-size: cover;
                /*背景的居中*/
                background-position: center;
                padding-top: 30px;
            }
            .gc p{
                text-align: center;
                line-height: 20px;
                color: white;
            }
            .bottom{
                height: 47px;
                background: url(image/phone_bottom.png);
                text-align: center;
                color: red;
                line-height: 47px;
                font-size: 24px;
            }
            #btn{
                width: 50px;
                height: 50px;
                display: block;
                position: absolute;
                left: 140px;
                bottom: 23px;
                background: url(image/normalmusic.svg);
                background-size: cover;

            }
            .rotate{
                /*自定义动画*/
                animation: rot 1.5s linear infinite;
            }
            @keyframes rot{
                /*执行动画*/
                from{
                    /*旋转*/
                    transform: rotate(0deg);
                }
                to{
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body><!--身体-->
        <!--盒子模型标签div 宽度  高度  背景  位置-->
        <!--id="自定义名称"  见名之意（有语意的英文单词）-->
        <div id="music">
            <!--class是可重复的-->
            <div class="m_top"></div>
            <div class="m_info"></div>
            <div class="title">相伴潭州</div>
            <div class="gc"></div>
            <div class="bottom">作者：王亚954188283</div>
            <a href="javascript:;" id="btn"></a>
        </div>
        <!--音乐标签 ：通过它来播放-->
        <audio src="image/10.mp3" id="myMusic"></audio>
        <!--文本域-->
        <textarea id="txt" style="display:none;">
            [00:00.60]相伴潭州——潭州学院校歌（作词/编曲/演唱：潭州学院）
            [00:01.55]歌词制作 
            [00:02.25]古潭州   源流长     书院镇潇湘
            [00:07.26]到如今    薪火旺    再铸新辉煌
            [00:12.86]跨深壑    品类广    传道授业忙
            [00:17.96]攀险峰    传奇唱     续书新篇章
            [00:23.37]风雨同舟  江湖共闯  劈破万里浪
            [00:28.50]相伴有你   日月光芒  将前途照亮
            [00:33.97]夙兴夜寐   心念联网   只为学员想
            [00:39.32]相伴有你   携手图强   奋斗在路上
            [00:46.53]筑平台   伟业昌   悲欢众担当
            [00:56.42]虹之玉   各一方   甘苦齐分尝
            [01:06.30]风雨同舟   江湖共闯   劈破万里浪
            [01:12.43]相伴有你   日月光芒   将前途照亮
            [01:18.00]夙兴夜寐   心念联网   只为学员想
            [01:23.23]相伴有你   携手图强   奋斗在路上
            [01:28.66]相伴有你   携手图强   奋斗在路上
            [01:36.67]
        </textarea>

        <script src="js/音乐播放器.js"></script>
    </body>
</html>
